<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>二维码生在线成器</title>
  <!-- 引入qrcodjs库 -->
  <script src="../../assets/qrcode.min.js"></script>
</head>

<body>
  <!-- 使用 -->
  <input id="text" type="text" value="l love you!!" style="width: 80%" /><br />
  <div id="qrcode" style="width: 100px; height: 100px; margin-top: 15px"></div>

  <script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
      width: 100,
      height: 100,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });

    function makeCode() {
      var elText = document.getElementById("text");

      if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
      }

      qrcode.makeCode(elText.value);
    }

    makeCode();
    let text = document.querySelector("#text");
    text.addEventListener("blur", function () {
      makeCode();
    });
    text.addEventListener("keydown", function (e) {
      if (e.keyCode == 13) {
        makeCode();
      }
    });
  </script>
</body>

</html>